<%--
  Created by IntelliJ IDEA.
  User: reeveslee
  Date: 16/5/19
  Time: 上午12:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>跬步公益跑</title>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="http://www.kuibutech.com/kuibuversion1/js/matchDevice.js"></script>

    <!-- 集成Sweet Alert插件 -->
    <link rel="stylesheet" type="text/css" href="http://www.kuibutech.com/kuibuversion1/css/sweetalert.css">
    <script src="http://www.kuibutech.com/kuibuversion1/js/sweetalert.min.js"></script>
</head>

<style>
    .banner {
        width: 100%;
    }

    blockquote {
        border-left: 3px solid #F1C640;
        padding: 0px 10px;
        font-size: 1.6rem;
    }

    .content {
        width: 95%;
        margin-top: 30px;
    }
</style>

<script>
    window.onload = function () {
        if (browserRedirect() == 0) {
            $("#download").show();
        } else if (browserRedirect() == 1) {
            $("#downloadImg").attr("action", "https://itunes.apple.com/us/app/id1019254614");
            $("#download").show();
        }
        if (is_weixn()) {
            var app = document.getElementById("downloadapp");
            app.onclick = alertHit;
        }

    }

    function is_weixn() {
        var ua = navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
            return true;
        } else {
            return false;
        }
    }

    function alertHit() {
        swal({
            title: "",
            text: "链接打不开? 点击右上角选择<br/><img width='30px' height='0px' src='http://img.kuibutech.com/kbApp_fixedImage/wxopensafari.png'><span style=\"color:red\">\"在浏览器中打开\"<span>",
            html: true,
            allowOutsideClick: true,
            showConfirmButton: false
        });
    }
</script>

<body>

<div style="width: 100%;margin-bottom: 15px;">
    <img class="banner"
         src="http://img.kuibutech.com/kbApp_fixedImage/kbActivity/kbShareBanner.jpg">
</div>

<div class="container-fluid">

    <div class="row">
        <div class="col-md-12" style="text-align: center;vertical-align: middle">
            <img width="14px" height="7px"
                 src="http://img.kuibutech.com/kbApp_fixedImage/kbActivity/wave.png">
            <label style="font-size: 1.3em;margin-left: 5px;margin-right: 5px;color: #303132">跬步公益跑</label>
            <img width="14px" height="7px"
                 src="http://img.kuibutech.com/kbApp_fixedImage/kbActivity/wave.png">
        </div>
    </div>
    <br/>
    <div class="row" style="width: 90%;margin-left: 5%">
        <div class="col-xs-5" style="text-align: center">
            <img src="http://img.kuibutech.com/kbApp_fixedImage/kbActivity/run.png" width="30px"
                 height="35px" style="margin-bottom: 10px;"><br/>
            <font style="margin-top: 15px;font-size: 1.4rem;color: #656667">跑步 ${minute} 分 ${second}秒</font>

        </div>

        <div class="col-xs-2">
            <div style="width: 1px;height: 60px;background: #CBCCCD;"></div>
        </div>


        <div class="col-xs-5" style="text-align: center">
            <img src="http://img.kuibutech.com/kbApp_fixedImage/kbActivity/money.png" width="30px"
                 height="35px" style="margin-bottom: 10px;"><br/>
            <font style="margin-top: 5px;font-size: 1.4rem;color: #656667">捐赠了 ${money}元</font>
        </div>
    </div>
</div>


<div style="margin-top: 15px;width: 90%;">
    <ul>
        <li style="color: #FFD049"><font color="black" style="font-size: 1.5rem">我参与了跬步公益跑日常打卡,本次跑步持续<font
                color="red">${minute}</font>分<font color="red">${second}</font> 秒,我通过跑步为DMD病患儿童捐献了<font
                color="red"> ${money}</font>元</font>
        </li>
    </ul>
</div>

<div class="content">
    <blockquote style="margin-left: 7%;margin-bottom: 5px;"><label>活动简介</label></blockquote>
    <ul>
        <li style="color: #FFD049"><font color="black" style="font-size: 1.5rem">跬步公益联合团中央,能量中国,中国听基会,中国DMD公益基金,发起了爱不停步全国公益跑步活动.</font>
        </li>
        <li style="color: #FFD049"><font color="black" style="font-size: 1.5rem">我们在全国开展"跬步公益跑周"活动.号召大家走向操场用奔跑来传递公益理念传递爱.
            <!--<a style="background: #FFD049;color: black">阅读更多</a>--></font>
        </li>
    </ul>

    <blockquote style="margin-left: 7%;margin-bottom: 5px;"><label>关于DMD基金</label></blockquote>
    <ul>
        <li style="color: #FFD049"><font color="black" style="font-size: 1.5rem">DMD公益基金全称为:
            上海市慈善基金会关爱杜氏肌营养不良(DMD)儿童专项基金,是国内第一个专注于DMD罕见病的医普,诊疗,康护,患者救助,疾病及公共政策研究,社会扶持和国际交流合作专项基金.</font>
        </li>
    </ul>
    <img src="http://img.kuibutech.com/kbApp_fixedImage/kbActivity/DMD1.jpg"
         style="margin-left: 7%;width: 92%;padding: 5px 5px 10px 5px">
    <ul>
        <li style="color: #FFD049"><font color="black" style="font-size: 1.5rem">致力于让每一位DMD患者生活有尊严,生命有价值.立足整个国家的健康繁衍,倡导建立罕见病救助体系与制度建设,呼应社会对DMD患者的怜悯,仁慈,扶弱的情感诉求与权力伸张,促进政府应对全民健康的理性建构.</font>
        </li>
    </ul>
    <img src="http://img.kuibutech.com/kbApp_fixedImage/kbActivity/DMD3.jpg"
         style="margin-left: 7%;width: 92%;padding: 5px 5px 10px 5px">
    <ul>
        <li style="color: #FFD049"><font color="black" style="font-size: 1.5rem">我们此举，就是要通过走到操场的运动形式，来呼唤大家关注健康，关注公益，关注身患DMD的孩子们，每天跑步半小时，为这些孩子们捐献里程，传递正能量，分享爱。</font>
        </li>
    </ul>
</div>

<div style="height: 80px;"></div>

<div id="download" hidden style="position:fixed;bottom:0px;width:100%;">
    <div id="close"
         style="position:absolute; border: 0px solid red;height: 30px;width: 30px;margin-left: 1%;margin-top: 15px"></div>
    <div style="position:absolute; border: 0px solid red;height: 30px;width: 50px;margin-left: 80%;margin-top: 15px"
         onclick="redirect()"></div>
    <img style="width:100%;" src="http://www.kuibutech.com/kuibuversion1/img/app/appdownload.jpg"/>
</div>
</body>

<!--设置下载框链接为打开或者下载，ios和安卓不同地址-->
<script>
    var loadIframe = null;
    function createIframe() {
        var iframe = document.createElement("iframe");
        iframe.style.cssText = "display:none;width:0px;height:0px;";
        document.body.appendChild(iframe);
        loadIframe = iframe;
    }

    function is_weixn() {
        var ua = navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
            return true;
        } else {
            return false;
        }
    }

    function redirect() {

        if (is_weixn()) {
            swal({
                title: "",
                text: "链接打不开? 点击右上角选择<br/><img style='width: 30px;height: 15px;margin-left:0px;' src='http://img.kuibutech.com/kbApp_fixedImage/wxopensafari.png'><span style=\"color:red\">\"在浏览器中打开\"<span>",
                html: true,
                allowOutsideClick: true,
                showConfirmButton: false
            });
            event.stopImmediatePropagation();
        }

        loadIframe.src = "kuibu://";
        var t = Date.now();
        setTimeout(function () {
            if (Date.now() - t < 1600) {
                if (browserRedirect() == 0) {
                    location.href = "http://139.129.18.232/kuibuversion1/version1_3/download/0";
                } else if (browserRedirect() == 1) {
                    location.href = "http://139.129.18.232/kuibuversion1/version1_3/download/1";
                } else {
                    location.href = "http://www.kuibutech.com";
                }
            }
        }, 1500)
    }
    createIframe();
</script>
</html>
